<template>
	<view>
		<view class="uni-padding-wrap uni-common-mt">
			<view class="video-parent">
				<video id="myVideo" :src="details.content_video[0].progressive[0].url" :danmu-list="danmuList"
					enable-danmu danmu-btn controls></video>
				<svg t="1639041784203" class="icon" viewBox="0 0 1024 1024" version="1.1"
					xmlns="http://www.w3.org/2000/svg" p-id="2335" width="16" height="16" @click="back">
					<path
						d="M369.728 512l384.768-384.704a48.64 48.64 0 0 0 0.896-68.8 48.64 48.64 0 0 0-68.736 0.96L269.44 476.736a48.704 48.704 0 0 0-11.136 17.344c-1.024 2.304-1.024 4.736-1.472 7.04-0.896 3.648-2.048 7.168-2.048 10.88 0 3.712 1.152 7.232 1.984 10.88 0.512 2.368 0.512 4.8 1.472 7.04a48.704 48.704 0 0 0 11.136 17.344l417.216 417.28a48.576 48.576 0 0 0 68.736 0.96 48.576 48.576 0 0 0-0.896-68.736L369.728 512z"
						p-id="2336" fill="#ffffff"></path>
				</svg>
			</view>
		</view>
		<view class="main" v-if="details">
			<view class="info">
				<view class="info-title">{{details.title}}</view>
				<view class="cate">{{cate()}}</view>
				<view class="intro">{{details.intro}}</view>
				<view class="allText" @click="open">
					<text class="text">阅读全文</text>
					<svg t="1639028940446" class="icon" viewBox="0 0 1024 1024" version="1.1"
						xmlns="http://www.w3.org/2000/svg" p-id="2334" width="16" height="16">
						<path
							d="M885.113 489.373L628.338 232.599c-12.496-12.497-32.758-12.497-45.254 0-12.497 12.497-12.497 32.758 0 45.255l203.3 203.3H158.025c-17.036 0-30.846 13.811-30.846 30.846 0 17.036 13.811 30.846 30.846 30.846h628.36L583.084 746.147c-12.497 12.496-12.497 32.758 0 45.255 6.248 6.248 14.438 9.372 22.627 9.372s16.379-3.124 22.627-9.372l256.775-256.775a31.999 31.999 0 0 0 0-45.254z"
							fill="#07baf5" p-id="2335"></path>
					</svg>
				</view>
				<uni-popup ref="popup" type="right" background-color="white" class="popup">
					<view class="format_content">
						<view class="title">
							{{details.title}}
						</view>
						<view class="t-name">
							{{details.format_content[0].content}}
							<!-- {{details.intro}} -->
						</view>
						<view class="content2">
							{{details.intro}}
						</view>
						<!-- <view class="from">
							{{content(details.format_content[3].content)}}
						</view> -->
						<view class="foot">
							<view class="username">
								{{"by " + details.editor.username}}
							</view>
							<view class="publish_time">
								{{publishTime(details.publish_time)}}
							</view>
						</view>
					</view>
					<svg @click="close" t="1639123126643" class="icon" viewBox="0 0 1024 1024" version="1.1"
						xmlns="http://www.w3.org/2000/svg" p-id="2484" width="16" height="16">
						<path
							d="M369.728 512l384.768-384.704a48.64 48.64 0 0 0 0.896-68.8 48.64 48.64 0 0 0-68.736 0.96L269.44 476.736a48.704 48.704 0 0 0-11.136 17.344c-1.024 2.304-1.024 4.736-1.472 7.04-0.896 3.648-2.048 7.168-2.048 10.88 0 3.712 1.152 7.232 1.984 10.88 0.512 2.368 0.512 4.8 1.472 7.04a48.704 48.704 0 0 0 11.136 17.344l417.216 417.28a48.576 48.576 0 0 0 68.736 0.96 48.576 48.576 0 0 0-0.896-68.736L369.728 512z"
							p-id="2485" fill="#000000"></path>
					</svg>
				</uni-popup>

			</view>
			<view class="relate">
				<RelateBanner v-for="(item,index) in details.relate_video" :key="index" :obj="item"></RelateBanner>
			</view>
			<Comment :comment="details.comment"></Comment>
		</view>
		<view class="footer">
			<view class="ipt">
				<input @keydown.enter="sendDanmu" v-model="danmuValue" class="uni-input" type="text" />
				<svg t="1639054325708" class="icon" viewBox="0 0 1024 1024" version="1.1"
					xmlns="http://www.w3.org/2000/svg" p-id="4384" width="16" height="16">
					<path
						d="M892.256171 955.226013h-764.710754c-18.992816 0-34.287031 15.394177-34.287031 34.287031s15.394177 34.287031 34.287031 34.287032h764.710754c18.992816 0 34.287031-15.394177 34.287031-34.287032s-15.294215-34.287031-34.287031-34.287031zM171.728705 890.650438c6.797429 4.898147 14.694442 7.397202 22.691417 7.397202 5.198034 0 10.296106-0.999622 15.294215-3.19879L396.04386 815.378909c11.595614-4.99811 21.691795-12.995085 29.188959-23.29119l20.592211-28.489224c0.099962-0.199924 0.299887-0.299887 0.399849-0.499811 0.099962-0.099962 0.099962-0.299887 0.199924-0.399849l404.646946-560.887848c22.591455-31.188203 15.594102-74.971643-15.594102-97.563098l-125.752435-90.965593c-31.188203-22.591455-74.87168-15.694064-97.563098 15.594102L186.423147 619.15313c-7.397202 10.296106-11.895501 22.291568-12.995085 34.886805l-17.593345 201.823661c-1.199546 13.69482 4.698223 26.689905 15.893988 34.786842z m469.822293-772.907653c1.299508-1.799319 3.398714-2.798941 5.497921-2.798942 1.399471 0 2.798941 0.399849 3.898525 1.299509l108.458976 78.670243c2.998866 2.199168 3.698601 6.39758 1.499433 9.396446L427.232063 666.935057l-119.354855-86.567257 333.67379-462.625015z m-368.760519 512.806035c0.099962-1.199546 0.499811-2.399093 1.299509-3.398715l2.399092-3.298752 119.354855 86.567257-2.399092 3.398714c-0.699735 0.999622-1.699357 1.799319-2.798942 2.299131l-130.050809 55.479015 12.195387-141.04665z"
						p-id="4385" fill="#707070"></path>
				</svg>
			</view>
			<view class="opts">
				<view class="opt">
					<svg t="1639055690108" class="icon" viewBox="0 0 1024 1024" version="1.1"
						xmlns="http://www.w3.org/2000/svg" p-id="5380" width="20" height="20">
						<path
							d="M171.712 571.648l0.352 0.32 287.904 252.8a64 64 0 0 0 82.912 1.344l296.832-244.544a215.584 215.584 0 1 0-301.824-300.576L512 316.672l-25.888-35.616a215.584 215.584 0 1 0-314.4 290.624zM32 407.584a279.584 279.584 0 0 1 480-194.944 279.584 279.584 0 0 1 480 194.944 278.144 278.144 0 0 1-113.024 224.512l-295.36 243.392a128 128 0 0 1-165.888-2.592L129.984 620.16A278.976 278.976 0 0 1 32 407.584z"
							p-id="5381" fill="#707070"></path>
					</svg>
					<text class="text">{{details.count_like}}</text>
				</view>
				<view class="opt">
					<svg t="1639055798924" class="icon" viewBox="0 0 1024 1024" version="1.1"
						xmlns="http://www.w3.org/2000/svg" p-id="8580" width="20" height="20">
						<path
							d="M807.563636 407.272727H698.181818c-13.963636 0-23.272727 9.309091-23.272727 23.272728s9.309091 23.272727 23.272727 23.272727h109.381818c41.890909 0 74.472727 34.909091 74.472728 74.472727v302.545455c0 41.890909-34.909091 74.472727-74.472728 74.472727H216.436364c-41.890909 0-74.472727-34.909091-74.472728-74.472727v-302.545455c0-41.890909 34.909091-74.472727 74.472728-74.472727h111.709091c13.963636 0 23.272727-9.309091 23.272727-23.272727s-9.309091-23.272727-23.272727-23.272728H216.436364c-67.490909 0-121.018182 53.527273-121.018182 121.018182v302.545455c0 67.490909 53.527273 121.018182 121.018182 121.018181h591.127272c67.490909 0 121.018182-53.527273 121.018182-121.018181v-302.545455c0-67.490909-53.527273-121.018182-121.018182-121.018182z"
							fill="#2c2c2c" p-id="8581"></path>
						<path
							d="M318.836364 311.854545c6.981818 0 11.636364-2.327273 16.290909-6.981818L488.727273 148.945455V744.727273c0 13.963636 9.309091 23.272727 23.272727 23.272727s23.272727-9.309091 23.272727-23.272727V148.945455l153.6 153.6c4.654545 4.654545 11.636364 6.981818 16.290909 6.981818s11.636364-2.327273 16.290909-6.981818c9.309091-9.309091 9.309091-23.272727 0-32.581819l-193.163636-193.163636c-4.654545-4.654545-11.636364-6.981818-16.290909-6.981818-6.981818 0-11.636364 2.327273-16.290909 6.981818L302.545455 269.963636c-9.309091 9.309091-9.309091 23.272727 0 32.581819 2.327273 6.981818 9.309091 9.309091 16.290909 9.30909z"
							fill="#707070" p-id="8582"></path>
					</svg>
					<text class="text">{{details.count_share}}</text>
				</view>
				<view class="opt">
					<svg t="1639055883690" class="icon" viewBox="0 0 1024 1024" version="1.1"
						xmlns="http://www.w3.org/2000/svg" p-id="11546" width="20" height="20">
						<path
							d="M198.7 292.7h0.9-0.9zM825.8 292.8c-0.3 0.1-0.6 0-0.9 0-14.8 0-26.9 12-26.9 26.9 0 14.8 12 26.9 26.9 26.9h0.3c44.3 0.2 80.3 36.3 80.3 80.6v312.1c0 20.8-8 39.7-20.9 54-6.1 6.7-13.3 12.4-21.4 16.8-11.4 6.2-24.4 9.9-38.3 9.9H199.6c-11 0-21.4-2.3-31-6.3-8.4-3.5-16.1-8.4-22.7-14.4-16.5-14.8-26.9-36.2-26.9-60V427.1c0-44.5 36.2-80.6 80.6-80.6h-0.4c14.6-0.2 26.4-12.1 26.4-26.8 0-14.8-12-26.9-26.9-26.9-73.7 0.5-133.5 60.5-133.5 134.3v312.1c0 71.4 56.1 129.8 126.5 134 2.6 0.2 5.2 0.4 7.9 0.4H825c26.3 0 50.9-7.7 71.6-20.9 5.5-3.5 10.8-7.4 15.7-11.6 28.7-24.7 47-61.2 47-101.9V427.1c0-73.8-59.8-133.8-133.5-134.3z m-0.4 53.7h0.4-0.4zM825 292.7h0.9-0.9z"
							fill="#2c2c2c" p-id="11547"></path>
						<path
							d="M298.6 537.8l202.1 96.5c0.2 0.1 0.3 0.1 0.5 0.2 1.3 0.6 2.7 1 4.1 1.4 0.5 0.1 0.9 0.3 1.4 0.4 1.6 0.3 3.3 0.5 5 0.6 0.2 0 0.4 0.1 0.6 0.1 0.5 0 1-0.1 1.5-0.1s1 0.1 1.5 0.1c3.9 0 7.8-0.8 11.6-2.6l201.4-96.2c13.3-6.3 20.5-22 14.7-35.5-6-14.2-22.6-20.3-36.3-13.8l-167.2 79.9c-0.2 0.1-0.4 0-0.4-0.2V159.5c0-11.8-7.1-23.1-18.4-26.6-18.5-5.7-35.4 8-35.4 25.6V567c0 0.2-0.2 0.3-0.4 0.2l-164.2-78.4c-15.9-7.6-35.5 1.8-38.3 20.9-1.6 11.7 5.5 23 16.2 28.1z"
							fill="#707070" p-id="11548"></path>
					</svg>
					<text class="text">缓存</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import RelateBanner from '@/components/RelateBanner/RelateBanner.vue'
	import Comment from '@/components/Comment/Comment.vue'
	export default {
		components: {
			RelateBanner,
			Comment,
		},
		data() {
			return {
				src: '',
				danmuList: [],
				danmuValue: '',
				details: {},
			}
		},
		onReady: function(res) {
			// #ifndef MP-ALIPAY
			this.videoContext = uni.createVideoContext('myVideo')
			// #endif
		},
		methods: {
			sendDanmu: function() {
				this.videoContext.sendDanmu({
					text: this.danmuValue,
					color: this.getRandomColor()
				});
				this.danmuList.push({
					text: this.danmuValue,
					color: this.getRandomColor()
				})
				this.danmuValue = '';
			},
			getRandomColor: function() {
				const rgb = []
				for (let i = 0; i < 3; ++i) {
					let color = Math.floor(Math.random() * 256).toString(16)
					color = color.length == 1 ? '0' + color : color
					rgb.push(color)
				}
				return '#' + rgb.join('')
			},
			cate() {
				let a = parseInt(this.details.duration / 60);
				let b = parseInt(this.details.duration % 60);
				if (a < 10) {
					a = "0" + a;
				}
				if (b < 10) {
					b = "0" + b;
				}
				let t = a + "\'" + b + "\"";
				return this.details.cate[0] + " / " + t;
			},
			back() {
				uni.navigateBack();
			},
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open();
			},
			close() {
				this.$refs.popup.close()
			},
			publishTime(t){
				t = parseInt(t+"000");
				let now = new Date(t);
				return now.getFullYear() + "." + (now.getMonth()+1) + "." + now.getDate();
			},
			content(text){
				if(text.indexOf('[') != -1){
					// let a =  text.replace(/^\[*\]$/,/^\<a href="#" \>123\<\/a\>$/);
					let a = text.split('[').join('<').split(']').join('>')
					console.log(a);
					return a;
				}
			}
		},
		watch: {
			"$route.path"(n) {
				console.log(n);
				let a = n.split("/");
				a = a[a.length - 1];
				// if (a == "cinemafilter") {
				// this.getInit();
				// }
			},
		},
		onLoad(opt) {
			if (this.$store.state.details) {
				this.details = this.$store.state.details;
			} else {
				// uni.request({
				// 	url:''
				// })
			}
		},
		mounted(){
			
		}
	}
</script>

<style lang="less">
	video {
		width: 100vw;
	}

	.uni-padding-wrap {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2;

		/deep/ .uni-video-container {
			height: 211px;
		}

		.video-parent {
			position: relative;

			svg {
				position: absolute;
				top: 3vw;
				left: 5vw;
				z-index: 3;
			}
		}
	}

	/deep/ .uni-video-container {
		display: block;
	}

	.info {
		padding: 3vw;
		margin-top: 500rpx;
		border-bottom: 2rpx solid #ddd;

		.info-title {
			text-align: center;
			font-size: 35rpx;
			font-weight: bold;
			line-height: 70rpx;
		}

		.cate {
			text-align: center;
			color: #666;
			font-size: 24rpx;
		}

		.intro {
			letter-spacing: 2rpx;
			font-size: 30rpx;
			margin-top: 5vw;
		}

		.allText {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 3vw;
			margin-bottom: 5vw;

			.text {
				color: #07baf5;
			}
		}
	}

	.relate {
		padding-bottom: 5vw;
		border-bottom: 2rpx solid #ddd;
	}

	.main {
		padding-bottom: 100rpx;
	}

	/deep/ .uni-popup__wrapper.right {
		width: 100vw;
		position: relative;

		svg {
			position: absolute;
			top: 3vw;
			left: 3vw;
		}
	}
	.popup{
		.format_content{
		transform: translateY(60rpx);
		padding: 3vw;
			.title{
				font-weight: bolder;
				font-size: 40rpx;
				margin: 0 auto;
				width: 65vw;
				text-align: center;
			}
			.t-name{
				line-height: 100rpx;
				text-align: center;
				color: #aaa;
			}
			.content2{
				// letter-spacing: 1rpx;
				font-size: 32rpx;
				margin: 3vw 0;
			}
			.from{
				line-height: 60rpx;
			}
			.foot{
				text-align: center;
				margin-top: 50rpx;
			}
		}
	}
	
	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: white;
		width: 100vw;
		height: 100rpx;
		display: flex;
		padding: 20rpx 3vw;
		box-sizing: border-box;
		justify-content: space-between;

		.ipt {
			border: 1px solid #ddd;
			border-radius: 40rpx;
			height: 60rpx;
			position: relative;
			padding-left: 55rpx;
			width: 40vw;

			svg {
				position: absolute;
				top: 14rpx;
				left: 20rpx;
			}

			input {
				width: 100%;
				height: 100%;
			}
		}

		.opts {
			display: flex;
			width: 40vw;
			justify-content: space-between;

			.opt {
				display: flex;
				flex-direction: column;

				.text {
					font-size: 24rpx;
					color: #888;
					line-height: 25rpx;
				}
			}
		}
	}
</style>
